<template>
  <div class="content-wrap">
    <van-nav-bar title="详细信息" left-arrow @click-left="$router.go(-1)">
      <van-icon name="ellipsis" slot="right" v-if="friendDetail.isFriends"
                @click="$router.push({name: 'friendSetting', params: {id: $route.params.id}})"/>
    </van-nav-bar>
    <div class="top-wrap clickable">
      <div class="avatar">
        <img :src="friendDetail.icon" class="avatar-img">
      </div>
      <div class="content">
        <p class="name" v-if="friendDetail.nickname">{{friendDetail.nickname}}</p>
        <p class="desc">密聊号：{{friendDetail.username}}</p>
        <p class="desc">昵称：{{friendDetail.nickname || '昵称未设置'}}</p>
      </div>
    </div>

    <van-cell-group title="" class="group-cell" v-if="friendDetail.isFriends">
      <van-cell title="设置备注" is-link clickable :to="{name: 'setRemarks', params: {id: $route.params.id}}"/>
    </van-cell-group>

    <van-cell-group title="" class="group-cell">
      <van-cell title="性别" :value="sexList[friendDetail.sex]" clickable/>
      <van-cell title="地区" :value="friendDetail.area || '未设置'" clickable/>
    </van-cell-group>

    <div class="btn-wrap">
      <van-button type="primary" size="normal" block @click="addFriend(1)" style="margin-bottom: .2rem">添加好友</van-button>
      <van-button type="primary" size="danger" block @click="addFriend(2)">拒绝请求</van-button>
    </div>
  </div>
</template>

<script>
  import Socket from '../../utils/socket'

  export default {
    name: 'sureFriend',
    data () {
      return {
        friendDetail: {},
        sexList: {
          '1': '男',
          '2': '女',
          '3': '保密'
        }
      }
    },
    methods: {
      getInfo () {
        Socket.sendData('searchFriendsInfo', { uid: this.$route.params.id }).then(res => {
          if (res.action === 20004) {
            this.friendDetail = res.data
          }
        })
      },
      addFriend (status) {
        Socket.sendData('FriendsDoCheck', { status: status, uid: this.$route.params.id }).then(res => {
          if (res.action === 20007) {
            if (status === 1) {
              this.$dialog.confirm({
                message: '添加好友成功，立即聊天？'
              }).then(() => {
                this.$router.replace({ name: 'chat', params: { id: this.$route.params.id } })
              })
            } else {
              this.$router.go(-1)
            }
          }
        })
      }
    },
    created () {
      this.getInfo()
    }
  }
</script>

<style scoped lang="scss">
  .top-wrap {
    display: flex;
    align-items: center;
    padding: .14rem .2rem;
    background: #fff;
    margin-top: .3rem;

    .avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 1.2rem;
      height: 1.2rem;
      background: #e7eaec;
      border-radius: 50%;
      font-size: .32rem;
      font-weight: bold;
      color: #6b7294;
      overflow: hidden;
      margin-right: .2rem;

      .avatar-img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .content {
      .name {
        font-size: .3rem;
        color: #333;
        margin-bottom: .14rem;
      }

      .desc {
        color: #999;
        font-size: .26rem;
        line-height: 1.3;
      }
    }
  }

  .group-cell {
    margin-top: .3rem;
  }

  .btn-wrap {
    padding: .3rem;
  }
</style>
